<!--
 * @Description: 用户管理
 * @Author: xinqiao lxq1990.0716@qq.com
 * @Date: 2024-03-05
 * @LastEditors: xinqiao lxq1990.0716@qq.com
 * @LastEditTime: 2025-02-11
-->
<script lang="ts" setup>
  import { message } from 'ant-design-vue'
  import { onMounted, reactive, ref } from 'vue'

  import { requestGetUserInfoByUserId } from '/@/api/system/ysys-user/account'
  import { requestShowList, requestUpdateUserStatus } from '/@/api/system/ysys-user/user'
  import { accountStatusDesc, accountStatusEnum, authorizeDesc } from '/@/api/system/ysys-user/user/enum'
  import { HttpCodeEnum } from '/@/enums/httpEnum'
  import { useQueryPagination } from '/@/hooks/useQueryPagination'

  onMounted(() => queryList())

  /** 搜索条件 */
  const searchParam = reactive({
    /** 账号 */
    loginName: '',
    /** 实名认证 */
    authorize: null,
    /** 用户状态 */
    accountStatus: null,
    /** 注册日期 */
    createTime: [],
    /** 最近登录日期 */
    lastLoginTime: [],
  })

  /** 搜索条件下拉项 */
  const searchOptions = reactive({
    /** 状态 */
    accountStatus: Object.entries(accountStatusDesc).map((item) => ({ value: item[0], label: item[1] })),
    /** 实名认证 */
    authorize: Object.entries(authorizeDesc).map((item) => ({ value: item[0], label: item[1] })),
  })

  /**
   * 重置
   */
  const reset = () => {
    searchParam.loginName = ''
    searchParam.authorize = null
    searchParam.accountStatus = null
    searchParam.createTime = []
    searchParam.lastLoginTime = []
    queryList({ current: 1 })
  }

  /** 表格列 */
  const columns = [
    { title: '头像/昵称', key: 'userName' },
    { title: 'UID', customRender: ({ record }) => record.uid ?? '--' },
    { title: '账号', dataIndex: 'loginName', key: 'loginName' },
    { title: '认证状态', customRender: ({ record }) => record.authorize ?? '--' },
    { title: '注册时间', key: 'createTime' },
    { title: '最近登录', dataIndex: 'lastLoginTime' },
    { title: '操作', key: 'action' },
  ]

  /** 表格hook */
  const { loading, queryList, dataList, pagination, onPaginationChange } = useQueryPagination<ShowListTypes.IRequest, ShowListTypes.IResponse[]>(searchParam, requestShowList)

  /** 表格选中行 */
  const currentData = ref<ShowListTypes.IResponse>({
    userStatus: null,
    userId: '',
    loginName: '',
    createTime: null,
  })

  /** 冻结弹窗 */
  const modalFreeze = reactive({
    visible: false,
    confirmLoading: false,
    userId: null,
    loginName: '',
    onOk: async () => {
      modalFreeze.confirmLoading = true
      const { responseCode } = await requestUpdateUserStatus({ userStatus: accountStatusEnum.FREEZE, userId: modalFreeze.userId })
      modalFreeze.confirmLoading = false
      if (responseCode === HttpCodeEnum.SUCCESS) {
        modalFreeze.visible = false
        message.success('冻结成功')
        queryList()
      }
    },
  })

  /**
   * 冻结
   * @param item 用户数据
   */
  const freeze = (item) => {
    modalFreeze.userId = item.userId
    modalFreeze.loginName = item.loginName
    modalFreeze.visible = true
  }

  /**
   * 恢复
   * @param item 用户数据
   */
  const recovery = async (item) => {
    const { responseCode } = await requestUpdateUserStatus({ userStatus: accountStatusEnum.NORMAL, userId: item.userId })
    if (responseCode === HttpCodeEnum.SUCCESS) {
      message.success('恢复成功')
      queryList()
    }
  }

  /** 查看弹窗 */
  const modalCheck = reactive({
    visible: false,
    integral: '', // 积分
    userIdentityInfos: [], // 身份
    onCancel: () => {
      modalCheck.integral = ''
      modalCheck.userIdentityInfos = []
    },
  })

  /**
   * 查看
   * @param item 用户数据
   */
  const check = async (item) => {
    currentData.value = item
    const { responseData } = await requestGetUserInfoByUserId({ userId: currentData.value.userId })
    modalCheck.integral = responseData.integral
    modalCheck.userIdentityInfos = responseData.userIdentityInfos
    modalCheck.visible = true
  }
</script>

<template>
  <div class="user-list">
    <div class="fliter-wrap">
      <div class="filter-condition">
        <div class="filter-item">
          <span class="filter-name">账号：</span>
          <a-input v-model:value="searchParam.loginName" allowClear style="width: 200px" placeholder="手机号码/邮箱" @press-enter="queryList" />
        </div>
        <div class="filter-item">
          <span class="filter-name">实名认证：</span>
          <a-select v-model:value="searchParam.authorize" allowClear :options="searchOptions.authorize" style="width: 200px" />
        </div>
        <div class="filter-item">
          <span class="filter-name">用户状态：</span>
          <a-select v-model:value="searchParam.accountStatus" allowClear :options="searchOptions.accountStatus" style="width: 200px" />
        </div>
        <div class="filter-item">
          <span class="filter-name">注册日期：</span>
          <a-range-picker v-model:value="searchParam.createTime" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" style="width: 240px" />
        </div>
        <div class="filter-item">
          <span class="filter-name">最近登录日期：</span>
          <a-range-picker v-model:value="searchParam.lastLoginTime" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" style="width: 240px" />
        </div>
      </div>
      <div class="filter-button">
        <a-button class="filter-action" @click="reset">重置</a-button>
        <a-button class="filter-action" type="primary" @click="queryList({ current: 1 })">查询</a-button>
      </div>
    </div>
    <div class="user-list-content">
      <div class="content-name">用户管理</div>
      <a-table :columns="columns" :data-source="dataList" :loading="loading" :pagination="pagination" @change="onPaginationChange">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'userName'">
            <span>
              <img :src="record.headImg" class="headImg" />
              <span>{{ record.userName }}</span>
            </span>
          </template>
          <template v-else-if="column.key === 'createTime'">
            {{ new Date(+record.createTime).toLocaleString() }}
          </template>
          <template v-else-if="column.key === 'action'">
            <span>
              <a @click="freeze(record)" v-if="record.userStatus === accountStatusEnum.NORMAL">冻结</a>
              <a @click="recovery(record)" v-else>恢复</a>
              <a-divider type="vertical" />
              <a @click="check(record)"> 查看 </a>
            </span>
          </template>
        </template>
      </a-table>
    </div>
    <a-modal v-model:visible="modalFreeze.visible" title="冻结" okText="确定冻结" :confirm-loading="modalFreeze.confirmLoading" @ok="modalFreeze.onOk">
      <p>确认冻结用户 {{ modalFreeze.loginName }} 么，冻结后该用户无法进行登录。</p>
    </a-modal>
    <a-modal v-model:visible="modalCheck.visible" title="个人信息" :footer="null" @cancel="modalCheck.onCancel">
      <p>
        <span class="account">{{ currentData.loginName }}</span>
        <a-tag :color="currentData.userStatus === accountStatusEnum.NORMAL ? 'green' : 'volcano'">{{ currentData.userStatus === accountStatusEnum.NORMAL ? '正常' : '冻结' }} </a-tag>
      </p>
      <p
        >积分：
        <span style="color: #000">{{ modalCheck.integral }}</span>
      </p>
      <p style="display: flex">
        <span style="width: 46px">身份：</span>
        <span v-if="modalCheck.userIdentityInfos.length">
          <span v-for="item in modalCheck.userIdentityInfos" :key="item.id" style="display: block; color: #000">{{ item.identityName }}</span>
        </span>
      </p>
    </a-modal>
  </div>
</template>

<style lang="less" scoped>
  .user-list {
    .fliter-wrap {
      border-radius: 2px;
      background: #fff;
      margin-bottom: 16px;
      display: flex;
      justify-content: space-between;
      padding: 24px 24px 0;

      .filter-condition {
        flex: 1;

        .filter-item {
          display: inline-block;
          margin-bottom: 24px;

          &:not(:nth-last-of-type(1)) {
            margin-right: 44px;
          }

          .filter-name {
            color: #000;
          }
        }
      }

      .filter-button {
        width: 150px;

        .filter-action {
          &:not(:nth-last-of-type(1)) {
            margin-right: 8px;
          }
        }
      }
    }

    .user-list-content {
      border-radius: 2px;
      background: #fff;
      padding: 20px 24px;

      .content-name {
        font-size: 16px;
        font-weight: 500;
        color: #000;
        margin-bottom: 20px;
      }

      .headImg {
        width: 32px;
        height: 32px;
        margin-right: 8px;
        border-radius: 50%;
      }
    }

    .account {
      color: #1d2129;
      font-size: 20px;
      font-weight: 500;
      margin-right: 8px;
    }
  }
</style>
